<template>
    <div>
        <div ref="chartRef" style="width: 100%;height: 380px"></div>
    </div>
</template>
<script lang="ts">

import { defineComponent, onMounted, ref, Ref } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
  name: 'pinpu',
  setup() {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, resize, echarts, getInstance } = useECharts(
      chartRef as Ref<HTMLDivElement>,
    );
    const data = [
      ['3846.00', -40],
      ['3848.24', -96],
      ['970000', -59],
      ['980000', -50],
      ['990000', -39],
      ['1000000', -70],
      ['1010000', -51],
      ['1020000', -117],
      ['1030000', -46],
      ['1040000', -98],
      ['1050000', -56],
      ['1060000', -56],
      ['1070000', -52],
      ['1080000', -58],
      ['1090000', -49],
      ['1100000', -118],
      ['1110000', -112],
      ['1120000', -42],
      ['1130000', -43],
      ['1140000', -37],
      ['1150000', -53],
      ['1160000', -12],
      ['1170000', -127],
      ['1180000', -62],
      ['1190000', -23],
      ['1200000', -59],
      ['1210000', -118],
      ['1220000', -60],
      ['1230000', -116],
      ['1240000', -19],
      ['1250000', -33],
      ['1260000', -20],
      ['1270000', -20],
      ['1280000', -125],
      ['1290000', -41],
      ['1300000', -106],
      ['1310000', -34],
      ['1320000', -106],
      ['1330000', -130],
      ['1340000', -86],
      ['1350000', -104],
      ['1360000', -91],
      ['1370000', -32],
      ['1380000', -13],
      ['1390000', -117],
      ['1400000', -59],
      ['1410000', -81],
      ['1420000', -35],
      ['1430000', -17],
      ['1440000', -41],
      ['1450000', -25],
      ['1460000', -103],
      ['1470000', -98],
      ['1480000', -116],
      ['1490000', -83],
      ['1500000', -32],
      ['1510000', -37],
      ['1520000', -71],
      ['1530000', -113],
      ['1540000', -64],
      ['1550000', -24],
      ['1560000', -88],
      ['1570000', -14],
      ['1580000', -119],
      ['1590000', -103],
      ['1600000', -85],
      ['1610000', -10],
      ['1620000', -94],
      ['1630000', -125],
      ['1640000', -123],
      ['1650000', -51],
      ['1660000', -40],
      ['1670000', -68],
      ['1680000', -43],
      ['1690000', -80],
      ['1700000', -100],
      ['1710000', -129],
      ['1720000', -89],
      ['1730000', -80],
      ['1740000', -66],
      ['1750000', -63],
      ['1760000', -54],
      ['1770000', -46],
      ['1780000', -39],
      ['1790000', -10],
      ['1800000', -37],
      ['1810000', -22],
      ['1820000', -75],
      ['1830000', -11],
      ['1840000', -115],
      ['1850000', -35],
      ['1860000', -56],
      ['1870000', -23],
      ['1880000', -61],
      ['1890000', -91],
      ['1900000', -115],
      ['1910000', -102],
      ['1920000', -115],
      ['1930000', -54],
      ['1940000', -71],
      ['1950000', -72],
      ['1960000', -91],
      ['1970000', -118],
      ['1980000', -18],
      ['1990000', -22],
      ['2000000', -56],
      ['2010000', -97],
      ['2020000', -48],
      ['2030000', -74],
      ['2040000', -55],
      ['2050000', -53],
      ['2060000', -78],
      ['2070000', -26],
      ['2080000', -88],
      ['2090000', -115],
      ['2100000', -115],
      ['2110000', -51],
      ['2120000', -97],
      ['2130000', -23],
      ['2140000', -54],
    ];
    const dateList = data.map(function (item) {
      return item[0];
    });
    const valueList = data.map(function (item) {
      return item[1];
    });
    setOptions({
      // Make gradient line here
      visualMap: [
        {
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 0,
          max: 400,
        },
        {
          show: false,
          type: 'continuous',
          seriesIndex: 1,
          dimension: 0,
          min: 0,
          max: dateList.length - 1,
        },
      ],
      title: [],
      tooltip: {
        trigger: 'axis',

      },
      dataZoom: [
        {
          startValue: '1820000',
          orient:"vertical",
          right:0
        },
        {
          type: 'inside',
        },
      ],
      xAxis: [
        {
          // 传数据
          data: dateList,
        },
      ],
      yAxis: [{
        alignTicks:{
            show:true
        },
        axisLine:{
            show:true
        },
        splitLine: { show: true }
      }],
      grid: {
        left: '10%',
        right: '12%',
        bottom: '20%',
      },
      series: [
        {
          type: 'line',
          showSymbol: false,
          // 传数据
          data: valueList,
          itemStyle: {
            color: 'red',  // 修改折线颜色为红色
          },
          lineStyle: {
            color: 'red',  // 修改折线颜色为红色
          },
          markPoint:{
            data:[{
                name:'特殊点',
                coord:['1610000', -10],
                symbolSize: 30,
                itemStyle: {
                  color: '#5d0ef5'
                },
                label: {
                  show: false
                },
              }],
          },
        },
      ],
      toolbox: {
          right: "0%",
          top: "20px",
          feature: {
            restore: {},
            saveAsImage: {},
          },
        },
    });
    return{
        chartRef
    }
  }

})
</script>
<style>

</style>